<template>
  <div class="yingfu">
    <el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    </div>
    <!-- 条查 -->
    <div class="tiaocha">
    <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="关键字" >
    <el-input v-model="form.collaborators" placeholder="请输入内容" size="mini"></el-input>
  </el-form-item>
    <el-form-item label="业务类型">
              <el-select v-model="form.id" placeholder="请选择" size="mini"> 
                <el-option
                  v-for="item in userList"  
                  :key="item.id"
                  :label="item.type" 
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

    <el-form-item label="收款时间">
              <el-date-picker
                size="mini"
                v-model="dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>      
  
  <el-form-item>
    <el-button type="primary" @click="search()" size="mini">查询</el-button>
    <el-button type="primary" @click="Reset()" size="mini">重置</el-button>
  </el-form-item>
</el-form>
 </div>
    </el-col>
</el-row>
    <!-- 表格 -->
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
                 <el-table :data="tableData" stripe style="width: 100%">

      <el-table-column prop="id" label="id" width="auto">
      </el-table-column>
       <el-table-column prop="collaborators" label="合作方" width="auto">
      </el-table-column>
      <el-table-column prop="tuser.nickName" label="负责人" width="auto">
      </el-table-column>

      <el-table-column prop="tposition.deptName" label="部门" width="auto">
      </el-table-column>
     
      <el-table-column prop="type" label="业务类型" width="auto">
      </el-table-column>
     <el-table-column prop="hexiaoMoney" label="应收金额" width="auto">
      </el-table-column>
     <el-table-column prop="yingfuYue" label="收款金额" width="auto">
      </el-table-column>
      
                  <el-table-column prop="remark" label="备注" width="auto">
      </el-table-column>   
    </el-table>
             <!-- 分页 -->
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="pageNum"
                      :page-sizes="[2, 5, 10, 20]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                    >
                    </el-pagination>
         </div>
        </el-col>
    </el-row>
  
  </div>
</template>

<script>
import axios from 'axios';  
export default {
  name: "yingfu",
  data() {
    return {
        //动态下拉
        userList:[],
      //日期
      dateRange: [],
      tableData: [],
      //分页
      pageNum: 1,
      pageSize: 2,
      total: 0,
      form: {
        startTime: "",
        endTime: "",
        collaborators:"",
       id:"",
       type:"",
      },
    };
  },
  created() {
    this.search();
    this.searchholiList();
  },
  methods: {
    //动态下拉
  searchholiList() {
    axios
      .post("http://localhost:8030/TMoney/findOptions")
      .then((res) => {
        this.userList = res.data;
      }).catch((error) => {
        console.error('获取列表失败:', error);
      });
    },
    //重置按钮
    Reset() {
      (this.form.startTime = ""), (this.form.endTime = "");
      this.dateRange = [];
      this.form.collaborators="",
this.form.kaipiaoStatus="",
this.form.status="",
      this.search();
    },
    //条查 分页
    search() {
      if (this.dateRange.length == 0) {
        this.$http
          .post(
            "http://localhost:8030/TMoney/findTMoneyPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            console.log(res.data)
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      } else {
        this.form.startTime = this.dateRange[0];
        this.form.endTime = this.dateRange[1];
        this.$http
          .post(
            "http://localhost:8030/TMoney/findTMoneyPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      }
    },

    //分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
  },
};
</script>

<style scoped>
</style>